:root{
    --theme-color: #b88154;
  }
  view {
      box-sizing: border-box;
  }
  
  page::-webkit-scrollbar,::v-deep::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
    color: transparent;
  }
  .page {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 32rpx;
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
  }
  // .page-main {width: 100%;flex: 1; box-sizing: border-box; position: relative;}
  .page-main {width: 100%;flex: 1; box-sizing: border-box; overflow-y: hidden;}
  
  .page-main .scoller{height: 100%;}
  .page-main.padding, .page-main .padding {padding: 10rpx 30rpx 30rpx;}
  .page-main.full {margin-left: -30px; margin-right: -30px; }
  .page-main.minheight {min-height: calc(100vw - 140rpx - var(--status-bar-height));}
  
  a:hover,input:hover,button:hover,textarea:hover,a:focus,input:focus,button:focus,textarea:focus {
    outline: none;
  }
  span,.warp{
    word-wrap: break-word; 
    word-break: break-all; 
  }
  .nowrap{
    white-space: nowrap;
  }
  .ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .clamp2{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .unselected {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    user-select:none;
  }
  .underline {
    text-decoration: underline;
  }
  a.underline {
    text-decoration: underline;
  }
  
  .white {color: #fff;}
  .gray {color: #999;}
  .gray6 {color: #666;}
  .graya {color: #aaa;}
  .black {color: #000;}
  .orange {color: #DF5220;}
  .red {color: #df2039;}
  .yellow {color: #EA961E;}
  .purple {color: #B750C7;}
  .blue{ color: #2d8cf0; }
  .green{ color: #11aa2b; }
  .op5{opacity: .5;}
  .vam {vertical-align: middle;}
  .ovh{ overflow: hidden; }
  
  .flex {display: flex;}
  .flex-items-center {align-items: center;}
  .flex-items-end {align-items:flex-end;}
  .flex-center {justify-content:center;}
  .flex-between {justify-content: space-between;}
  .flex-around {justify-content: space-around;}
  .flex-evenly {justify-content: space-evenly;}
  .flex-start {justify-content:flex-start;}
  .flex-end {justify-content:flex-end;}
  .flex-column {flex-direction: column;}
  .flex-wrap {flex-wrap: wrap;}
  .flex-0 {flex-shrink: 0; min-width: 0;}
  .flex-1 {flex: 1; min-width: 0;}
  .flex-2 {flex: 2; min-width: 0;}
  .flex-3 {flex: 3; min-width: 0;}
  .flex-4 {flex: 4; min-width: 0;}
  .flex-5 {flex: 5; min-width: 0;}
  .flex-6 {flex: 6; min-width: 0;}
  .lh10 {line-height: 1;}
  .lh13 {line-height: 1.3;}
  .lh14 {line-height: 1.4;}
  .lh15 {line-height: 1.5;}
  .lh16 {line-height: 1.6;}
  .lh17 {line-height: 1.7;}
  .lh18 {line-height: 1.8;}
  .lh19 {line-height: 1.9;}
  .lh20 {line-height: 2;}
  
  .inner {
    padding-left: 30rpx;
    padding-right: 30rpx;
  }
  .innor {
    margin-left: 20rpx;
    margin-right: 20rpx;
  }
  .w50{width: 50%;}
  .tc {text-align: center;}
  .tr {text-align: right;}
  .fit-height {height: 100%;}
  .fit-width {width: 100%;}
  .rp {position: relative;}
  .ap {position: relative;}
  .animated.short{animation-duration: 300ms;}
  .animated.normal{animation-duration: 600ms;}
  .light{font-weight: 500;}
  .blod{font-weight: 700;}
  .bloder{font-weight: 900;}
  .lighter{font-weight: lighter;}
  .disc {-webkit-text-security:disc; text-security:disc;}
  .round{border-radius: 150rpx 150rpx;}
  .button-white{
    color: #fff;
    border-color: #fff;
    font-size: 28rpx;
    margin: 0;
  }
  .f20 {font-size:20rpx;}
  .f22 {font-size:22rpx;}
  .f24 {font-size:24rpx;}
  .f25 {font-size:25rpx;}
  .f26 {font-size:26rpx;}
  .f28 {font-size:28rpx;}
  .f30 {font-size:30rpx;}
  .f32 {font-size:32rpx;}
  .f34 {font-size:34rpx;}
  .f36 {font-size:36rpx;}
  .f38 {font-size:38rpx;}
  .f40 {font-size:40rpx;}
  .f46 {font-size:46rpx;}
  .f50 {font-size:50rpx;}
  .f60 {font-size:60rpx;}
  .f70 {font-size:70rpx;}
  .f80 {font-size:80rpx;}
  .f120 {font-size:120rpx;}
  
  /*margin*/
  .m0 {margin: 0rpx;}
  .mt2 {margin-top:2rpx}
  .mt-30 {margin-top:-30rpx}
  .mt5 {margin-top:5rpx}
  .mt6 {margin-top:6rpx}
  .mt8 {margin-top:8rpx}
  .mt10 {margin-top:10rpx}
  .mt15 {margin-top:15rpx}
  .mt20 {margin-top:20rpx}
  .mt22 {margin-top:22rpx}
  .mt25 {margin-top:25rpx}
  .mt30 {margin-top:30rpx}
  .mt35 {margin-top:35rpx}
  .mt40 {margin-top:40rpx}
  .mt45 {margin-top:45rpx}
  .mt50 {margin-top:50rpx}
  .mt55 {margin-top:55rpx}
  .mt60 {margin-top:60rpx}
  .mt65 {margin-top:65rpx}
  .mt70 {margin-top:70rpx}
  .mt80 {margin-top:80rpx}
  .mt90 {margin-top:90rpx}
  .mt100 {margin-top:100rpx}
  .mt110 {margin-top:110rpx}
  .mt120 {margin-top:120rpx}
  .mt150 {margin-top:150rpx}
  .mt190 {margin-top:190rpx}
  
  .mb10 {margin-bottom:10rpx}
  .mb15 {margin-bottom:15rpx}
  .mb20 {margin-bottom:20rpx}
  .mb30 {margin-bottom:30rpx}
  .mb40 {margin-bottom:40rpx}
  .mb50 {margin-bottom:50rpx}
  .mb60 {margin-bottom:60rpx}
  .mb100 {margin-bottom:100rpx}
  
  .ml5 {margin-left:5rpx}
  .ml6 {margin-left:6rpx}
  .ml10 {margin-left:10rpx}
  .ml12 {margin-left:12rpx}
  .ml15 {margin-left:15rpx}
  .ml20 {margin-left:20rpx}
  .ml25 {margin-left:25rpx}
  .ml30 {margin-left:30rpx}
  .ml40 {margin-left:40rpx}
  .ml45 {margin-left:45rpx}
  .ml50 {margin-left:50rpx}
  .ml70 {margin-left:70rpx}
  .ml80 {margin-left:80rpx}
  .ml100 {margin-left:100rpx}
  .ml120 {margin-left:120rpx}
  .ml150 {margin-left:150rpx}
  .ml300 {margin-left:300rpx}
  
  .mr5 {margin-right:5rpx}
  .mr10 {margin-right:10rpx}
  .mr15 {margin-right:15rpx}
  .mr20 {margin-right:20rpx}
  .mr30 {margin-right:30rpx}
  .mr40 {margin-right:40rpx}
  .mr50 {margin-right:50rpx}
  .mr100 {margin-right:100rpx}
  
  /*padding*/
  .p10 {padding:10rpx;}
  .p15 {padding:15rpx;}
  .p30 {padding:30rpx;}
  
  .pt0 {padding-top: 0;}
  .pt5 {padding-top:5rpx}
  .pt8 {padding-top:8rpx}
  .pt10 {padding-top:10rpx}
  .pt15 {padding-top:15rpx}
  .pt20 {padding-top:20rpx}
  .pt30 {padding-top:30rpx}
  .pt40 {padding-top:40rpx}
  .pt45 {padding-top:45rpx}
  .pt50 {padding-top:50rpx}
  .pt60 {padding-top:60rpx}
  .pt100 {padding-top:100rpx}
  
  .pb5 {padding-bottom:5rpx}
  .pb10 {padding-bottom:10rpx}
  .pb15 {padding-bottom:15rpx}
  .pb20 {padding-bottom:20rpx}
  .pb30 {padding-bottom:30rpx}
  .pb40 {padding-bottom:40rpx}
  .pb50 {padding-bottom:50rpx}
  .pb100 {padding-bottom:100rpx}
  
  .pl5 {padding-left:5rpx}
  .pl10 {padding-left:10rpx}
  .pl15 {padding-left:15rpx}
  .pl20 {padding-left:20rpx}
  .pl30 {padding-left:30rpx}
  .pl35 {padding-left:35rpx}
  .pl40 {padding-left:40rpx}
  .pl45 {padding-left:45rpx}
  .pl50 {padding-left:50rpx}
  .pl80 {padding-left:80rpx}
  .pl100 {padding-left:100rpx}
  
  .pr5 {padding-right:5rpx}
  .pr10 {padding-right:10rpx}
  .pr15 {padding-right:15rpx}
  .pr20 {padding-right:20rpx}
  .pr30 {padding-right:30rpx}
  .pr40 {padding-right:40rpx}
  .pr50 {padding-right:50rpx}
  .pr80 {padding-right:80rpx}
  .pr100 {padding-right:100rpx}
  
  [button] {
      &:active {
          opacity: .7;
      }
  }
  
  
// 重写hover样式
.navigator-hover{
    background-color: transparent !important;
    opacity: .8;
}
.navigator-none{
    background-color: transparent !important;
    opacity: 1;
}

// 倒三角
.arrow-downs{
    display: inline-block;
    width: 0px;
    height: 0px;
    border-top: 10rpx solid #666;
    border-left: 10rpx solid transparent;
    border-right: 10rpx solid transparent;
    vertical-align: middle;
    transition: transform .2s;
    &.round{
        transform: rotate(180deg);
    }
}

// 线条
.border-{
    &-normal,&-top,&-right,&-left,&-bottom{
      position: relative;
      z-index: 1;
      &::after{
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        top: 0;
        right: 0;
        box-sizing: border-box;
        width: 200%;
        height: 200%;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transform-origin: left top;
        transform-origin: left top;
        z-index: -1;
      }
    }
    &-normal::after{
        border: 1px solid $uni-border-color;
    }
    &-normal.round::after{
        border-radius: 100rpx 100rpx;
    }
    &-bottom::after{
        border-bottom: 1px solid $uni-border-color;
    }
    &-right::after{
        border-right: 1px solid $uni-border-color;
    }
    &-left::after{
        border-left: 1px solid $uni-border-color;
    }
    &-top::after{
        border-top: 1px solid $uni-border-color;
    }

}

// 按钮样式
.btn-theme{
    color: #fff;
    transition: opacity 0.15s, backgroundColor 0.15s;
    &.button-hover{
        color: hsla(0,0%,100%,.8);
        background-color: #a56837;
    }
    &[disabled]{
        color: #fff;
        background-color: #b88154;
        opacity: .8;
    }
}
.btn-yellow{
    color: #fff;
    background-color: #ff9600;
    transition: opacity 0.15s, backgroundColor 0.15s;
    &.button-hover{
        color: hsla(0,0%,100%,.8);
        background-color: #e28500;
    }
    &[disabled]{
        color: #fff;
        background-color: #ff9600;
        opacity: .8;
    }
}
.btn-cyan{
    color: #fff;
    background-color: #2db7f5;
    transition: opacity 0.15s, backgroundColor 0.15s;
    &.button-hover{
        color: hsla(0,0%,100%,.8);
        background-color: #149ad6;
    }
    &[disabled]{
        color: #fff;
        background-color: #2db7f5;
        opacity: .8;
    }
}
.btn-blue{
    color: #fff;
    background-color: #007aff;
    transition: opacity 0.15s, backgroundColor 0.15s;
    &.button-hover{
        color: hsla(0,0%,100%,.8);
        background-color: #0062cc;
    }
    &[disabled]{
        color: #fff;
        background-color: #007aff;
        opacity: .8;
    }
}
.btn-red{
    color: #fff;
    background-color: #e64340;
    transition: opacity 0.15s, backgroundColor 0.15s;
    &.button-hover{
        color: hsla(0,0%,100%,.8);
        background-color: #ce3c39;
    }
    &[disabled]{
        color: #fff;
        background-color: #e64340;
        opacity: .8;
    }
}
.btn-round{
    border-radius: 50rpx 50rpx;
}
